<template>
    <view class="container">
        <view class="header">
            <text class="title">Mood Box</text>
            <text class="subtitle">记录你的心情，了解自己</text>
        </view>
        
        <view class="quick-actions">
            <view class="action-btn" @click="navigateToRecord">
                <text class="iconfont icon-record">&#xe601;</text>
                <text>记录心情</text>
            </view>
            <view class="action-btn" @click="navigateToList">
                <text class="iconfont icon-list">&#xe602;</text>
                <text>心情列表</text>
            </view>
        </view>

        <view class="mood-summary" v-if="latestMood">
            <text class="summary-title">最近心情</text>
            <view class="mood-card">
                <text class="mood-level">{{ latestMood.moodLevel }}</text>
                <text class="mood-description">{{ latestMood.description }}</text>
                <text class="mood-date">{{ latestMood.date }}</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            latestMood: null
        }
    },
    onLoad() {
        this.fetchLatestMood();
    },
    methods: {
        fetchLatestMood() {
            // TODO: 从后端获取最近的心情记录
            this.latestMood = {
                moodLevel: '还不错',
                description: '今天工作很顺利',
                date: '2024-05-23'
            };
        },
        navigateToRecord() {
            uni.navigateTo({
                url: '/pages/mood-record/mood-record'
            });
        },
        navigateToList() {
            uni.navigateTo({
                url: '/pages/mood-list/mood-list'
            });
        }
    }
}
</script>

<style scoped>
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx;
}

.header {
    text-align: center;
    margin-bottom: 50rpx;
}

.title {
    font-size: 48rpx;
    font-weight: bold;
    color: #333;
}

.subtitle {
    font-size: 28rpx;
    color: #666;
}

.quick-actions {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-bottom: 50rpx;
}

.action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx;
    background-color: #f0f0f0;
    border-radius: 10rpx;
}

.mood-summary {
    width: 100%;
    background-color: #fff;
    border-radius: 10rpx;
    padding: 20rpx;
}

.summary-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
}

.mood-card {
    display: flex;
    flex-direction: column;
}
</style> 